<div
    bsModal
    #modal="bs-modal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="modal"
    aria-hidden="true"
    (onShown)="shown()"
    [config]="{ backdrop: 'static' }"
>
    <div class="modal-dialog modal-xxl">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    成本详细数据
                </h4>
                <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form novalidate  autocomplete="off">
                    <!--<Primeng-TurboTable-Start>-->
                    <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                        <p-table
                            #dataTable
                            (onLazyLoad)="getRecordsIfNeeds($event)"
                            [value]="primengTableHelper.records"
                            rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                            [paginator]="false"
                            [lazy]="true"
                            [responsive]="primengTableHelper.isResponsive"
                        >
                            <ng-template pTemplate="header">
                                <tr>
                                    <th style="width:160px">
                                        条码
                                    </th>
                                    <th style="width:80px">
                                        车间
                                    </th>
                                    <th style="width:60px">
                                        工序号
                                    </th>
                                    <th style="width:100px">
                                        工序名称
                                    </th>
                                    <th style="width:80px">
                                        类型
                                    </th>
                                    <th style="width:80px">
                                        项目
                                    </th>
                                    <th style="width:80px">
                                        时间
                                    </th>
                                    <th style="width:80px">
                                        成本
                                    </th>
                                    <th style="width:160px">
                                        公式
                                    </th>

                                    <th style="width:100px">
                                        备注
                                    </th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-record="$implicit">
                                <tr>
                                    <td>
                                        {{ record.batchId }}
                                    </td>
                                    <td>
                                        {{ record.workshop }}
                                    </td>
                                    <td>
                                        {{ record.processSequence }}
                                    </td>
                                    <td>
                                        {{ record.processName }}
                                    </td>
                                    <td>
                                        {{ record.category }}
                                    </td>
                                    <td>
                                        {{ record.type }}
                                    </td>
                                    <td>
                                        {{ record.time | momentFormat: "YYYY-MM-DD HH:mm" }}
                                    </td>
                                    <td>
                                        {{ record.amount | number: "1.2-2" }}
                                    </td>
                                    <td>
                                        {{ record.formula }}
                                    </td>
                                    <td>
                                        {{ record.remark }}
                                    </td>
                                </tr>
                            </ng-template>
                        </p-table>
                        <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                            {{ "NoData" | localize }}
                        </div>
                        <div class="primeng-paging-container">
                            <p-paginator
                                [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                #paginator
                                (onPageChange)="getRecordsIfNeeds($event)"
                                [totalRecords]="primengTableHelper.totalRecordsCount"
                                [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage"
                            >
                            </p-paginator>
                            <span class="total-records-count">
                                {{ "TotalRecordsCount" | localize: primengTableHelper.totalRecordsCount }}
                            </span>
                        </div>
                    </div>
                    <!--<Primeng-TurboTable-End>-->
                </form>
            </div>
        </div>
    </div>
</div>
